<template>
  <div class="info" v-loading="loading">
    <div class="card_con search_data mb15">
      <el-row class="mb15">
        <el-col :span="8" class="pr40">
          <div class="fz13 mb10">订单号</div>
          <el-input v-model="orderId" placeholder="请输入订单号"></el-input>
        </el-col>
        <el-col :span="4">
          <div class="fz13 mb10">&nbsp;</div>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="card_con order_content">
      <div class="title">相关信息</div>
      <el-row class="mb20">
        <el-col :span="6" class="flex">
          <div class="col">订单金额：</div>
          <div>200</div>
        </el-col>
        <el-col :span="6" class="flex">
          <div class="col">订单金额：</div>
          <div>200</div>
        </el-col>
        <el-col :span="6" class="flex">
          <div class="col">订单金额：</div>
          <div>200</div>
        </el-col>
        <el-col :span="6" class="flex">
          <div class="col">订单金额：</div>
          <div>200</div>
        </el-col>
      </el-row>
      <div class="title">分账信息</div>
      <el-row class="mb20">
        <el-table
          border
          :data="tableData"
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="id" label="订单号" min-width="15%">
          </el-table-column>
          <el-table-column prop="name" label="用户" min-width="15%">
          </el-table-column>
          <el-table-column prop="cate_text" label="首页" min-width="15%">
          </el-table-column>
          <el-table-column prop="price" label="状态" min-width="10%">
          </el-table-column>
        </el-table>
      </el-row>
      <div class="title">调用支付</div>
      <el-row class="mb20">
        <el-table
          border
          :data="tableData"
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="id" label="订单号" min-width="20%">
          </el-table-column>
          <el-table-column prop="name" label="汇付订单号" min-width="20%">
          </el-table-column>
          <el-table-column prop="cate_text" label="商户号" min-width="20%">
          </el-table-column>
          <el-table-column prop="price" label="支付" min-width="20%">
          </el-table-column>
          <el-table-column label="操作" min-width="30%">
            <template slot-scope="scope">
              <div class="caozuo">
                <div
                  class="handleExamine hand_cs"
                  @click="handleDetail(scope.row)"
                >
                  支付详情
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="title">返还积分情况</div>
      <el-row class="mb20">
        <el-table
          border
          :data="tableData"
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="id" label="订单号" min-width="20%">
          </el-table-column>
          <el-table-column prop="name" label="汇付订单号" min-width="20%">
          </el-table-column>
          <el-table-column prop="cate_text" label="商户号" min-width="20%">
          </el-table-column>
          <el-table-column prop="price" label="支付" min-width="20%">
          </el-table-column>
          <el-table-column label="操作" min-width="20%">
            <template slot-scope="scope">
              <div class="caozuo">
                <div
                  class="handleExamine hand_cs"
                  @click="handleDetail(scope.row)"
                >
                  返还明细详情
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="title">相关日志</div>
      <el-row class="mb20">
        <el-table
          border
          :data="tableData"
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
          highlight-current-row
        >
          <el-table-column prop="id" label="订单号" min-width="10%">
          </el-table-column>
          <el-table-column prop="name" label="操作日志" min-width="20%">
          </el-table-column>
          <el-table-column prop="price" label="时间" min-width="10%">
          </el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      orderId: "",
    };
  },
  methods: {
    //查询
    handleSearch() {
      this.loading = true;
      this.page.pageNum = 1;
      this.allShopList();
    },
    //详情
    handleDetail(row) {
      this.rowId = row;
      this.detailDialog = true;
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.order_content {
  min-height: 200px;
  .title {
    font-weight: bold;
    margin-bottom: 15px;
  }
  /deep/ .el-table .el-table__cell {
    padding: 8px 0;
  }
}
</style>
